Das Mikroformat für Kontaktdaten (hCard)
Die Basis für das hCard-Mikroformat ist das vCard-Dateiformat (vCard steht für visiting card, also Visitenkarte). Dieses Format kennen Sie vielleicht aus Microsoft Outlook oder vergleichbaren Anwendungen für E-Mail und/oder Personal Information Management. Entsprechende Dateien haben die Standardendung .vcf. Das vCard-Format ist ein RFC-standardisiertes Textformat zum Speichern von Adress- und Kontaktdaten. Verwendet wird es vor allem für den Datenaustausch. So bieten beispielsweise viele E-Mail-Programme die Möglichkeit an, die eigenen Kontaktdaten als vcf-Datei automatisch an alle ausgehende E-Mails anzuhängen. Der Mail-Empfänger kann die vcf-Datei dann direkt in seine Adressdaten importieren.
Werfen wir zunächst einen Blick auf einen typischen Inhalt einer solchen vcf-Datei:
BEGIN:VCARD VERSION:3.0 N:Lyse;Anna FN:Anna Lyse ORG:Beispiel-AG ADR;WORK:;;Phantasiestr. 1;Nirgendwo;;D-99991 TEL;WORK;VOICE:+49 999 12345 TEL;TYPE=CELL:+49 144 234422 TEL;WORK;FAX:+49 999 54321 URL:http://de.example.com/ EMAIL;INTERNET:anna.lyse@example.com END:VCARD
Jede Zeile der Datei beschreibt ein Datenfeld. Zu Beginn steht der Name des Datenfeldes in Großbuchstaben. Getrennt durch einen Doppelpunkt, folgt der zugehörige Feldwert. Sowohl Feldnamen als auch Feldwerte können nochmals strukturell unterteilt sein. Solche Unterstrukturen werden durch Semikolonzeichen angegeben. Im obigen Beispiel etwa ist das Feld TEL;WORK;VOICE ein solcher Fall. TEL steht für „Telekommunikationsdatum“, WORK für „Büro/Geschäftlich“ und VOICE für „Festnetztelefon“. Ebenso wäre auch die Angabe TEL;HOME;VOICE möglich, nämlich für die private Festnetztelefonnummer.
Das Mikroformat vCard ist nichts anderes als eine Vorgabe, wie das vCard-Format in gültiges HTML umgesetzt werden soll. Da das gesamte vCard-Format unterstützt wird, können Sie sich, wenn Sie Spezifikationen mögen, mit den möglichen vCard-Feldnamen und ihrer korrekten Verwendung vertraut machen. Die offizielle Spezifikation und Dokumentation des vCard-Formats finden Sie unter:
http://www.ietf.org/rfc/rfc2426.txt
RFC (Request for Comment) 2426
Eine andere Möglichkeit, um sich mit dem vcf-Format vertraut zu machen, besteht darin, einfach Adressdatensätze aus einem E-Mail-Programm in vcf-Dateien zu exportieren. Voraussetzung ist natürlich, dass das Mailprogramm dies unterstützt. Mit einem Texteditor oder Text-Viewer können Sie anschließend die exportierte vcf-Datei ansehen.
Umsetzung ins hCard-Mikroformat
Sie können Kontaktdaten im hCard-Mikroformat im HTML-Quelltext einer Webseite dort platzieren, wo Sie möchten, also dort, wo die Daten auch angezeigt werden sollen.
Dabei haben Sie überraschend viele Freiheiten. Bei der Wahl der HTML-Elemente sind Sie nämlich vergleichsweise frei. Wichtig ist nur, dass Sie die logische Struktur der Daten abbilden, und dass Sie dabei die Feldnamen in Form von class-Attributen in HTML wiedergeben (kleingeschrieben).
Damit eine HTML-Baumstruktur als vCard-Abbildung erkennbar ist, muss sie in ein äußeres HTML-Element eingeschlossen werden, das class="vcard" zugewiesen bekommt. Beispiel:
<div class="vcard"> <!-- Inhalt der Kontaktdaten --> </div>
Da es in HTML ein address-Element gibt, bietet sich aber auch dieses Element an:
<address class="vcard"> <!-- Inhalt der Kontaktdaten --> </address>
Beide Beispiele sind erlaubt, genauso wie <span class="vcard"> oder <body class="vcard"> (letzteres bietet sich an, wenn eine Webseite nichts anderes als Kontaktdaten enthält).
Die vollständige Umsetzung unserer Beispiel-vCard könnte wie folgt aussehen:
<address class="vcard">
<span class="n" style="display: none">
<span class="family-name">Lyse</span>
<span class="given-name">Anna</span>
</span>
<span class="fn">Anna Lyse</span><br>
<span class="org">Beispiel-AG</span><br>
<span class="adr work">
<span class="street-address">Phantasiestr. 1</span><br>
<span class="country-name">D</span>-
<span class="postal-code">99991</span> <span class="locality">Nirgendwo</span><br>
</span>
<span class="tel home voice">+49 999 12345</span> (privat)<br>
<span class="tel cell">+49 144 234422</span> (geschäftlich)<br>
<span class="tel work fax">+49 999 54321</span> (Fax geschäftlich)<br>
<a class="url" href="http://www.example.com/">http://www.example.com/</a><br>
<a class="email" href="mailto:anna.lyse@example.com">anna.lyse@example.com</a>
</address>
Im Browser sieht das beispielsweise so aus:
Selbstverständlich können Sie die class-Angaben zu den Detaildaten der Kontaktdaten auch mit CSS formatieren. Auch zusätzliche Attribute wie id=, style= oder auch Event-Handler sind innerhalb der Elemente, die ein vcard-spezifisches class-Attribut enthalten, kein Problem. Das Gleiche gilt für ergänzenden Text zwischen solchen Elementen. In unserem Beispiel stehen etwa die Texte (privat), (geschäftlich) usw. für die Kenntlichmachung der Telefoniedaten auf der Webseite außerhalb der für das Mikroformat bedeutungstragenden Elemente.
Beim Namen haben wir ein wenig getrickst. Für das Mikroformat eignet sich eine Struktur aus einem Elternelement mit class="n", das Kindelemente mit den class-Namen given-name und family-name enthält. Für das Mikroformat ist es jedoch sinnvoll, außerdem noch ein Element mit class="fn" (fn steht für full name) zu notieren, dass den gesamten Namen noch mal in der normalen Darstellungsform enthält. Damit der Name aber nicht doppelt auf der Webseite erscheint, haben wir das komplexe span-Konstrukt mit style="display: none" für die Anzeige unsichtbar gemacht.
Daten, die zur Anschrift gehören, können wie in unserem Beispiel in ein Element mit class="adr" als Kindelemente eingeschlossen werden. Einem class-Attribut dürfen auch mehrere Klassennamen zugeordnet werden, und zwar durch Leerzeichen getrennt. In unserem Beispiel haben wir mit class="adr work" kenntlich gemacht, dass es sich um die Geschäftsadresse handelt. Zusätzlich könnte auch ein paralleles Konstrukt mit class="adr home" notiert werden.
Auch bei den Telefonieangaben haben wir im Beispiel von den Mehrfachangaben zum class-Attribut Gebrauch gemacht, z.B. mit <span class="tel home voice">. Bei Telefonieangaben ist noch zu beachten, dass die Feldinhalte, also der Elementinhalt, im internationalen kanonischen Darstellungsformat für Telefonnummern notiert werden sollte. Dieses Format wird von manchen Programmen erkannt, die zwischen Landesvorwahl, Ortsvorwahl und Rufnummer unterscheiden.
Für Internet-Adressen bietet sich selbstredend das a-Element inklusive href-Attribut an. So werden im Beispiel die Mailadresse und die Webadresse der Firma anklickbar gemacht.
Es gibt zahlreiche Möglichkeiten, Kontaktdaten im Rahmen der erlaubten hCard-Syntax noch ganz anders zu strukturieren. Unser obiges Beispiel ist nichts weiter als ein Muster, das für viele Praxisfälle anwendbar ist.